<%@page import="team02.client.core.test.Test"%>
<%@page import="java.util.ArrayList"%>
<%@page import="javax.swing.text.Document"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="team02.server.model.MySQLModel"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<script src="../js/jquery.min.js"></script>
<script src="../js/highcharts.js"></script>
<link rel="stylesheet" type="text/css" href="css/template.css">
<jsp:useBean id="testBean"
	class="team02.server.bean.TestBean" scope="page"></jsp:useBean>

<style type="text/css">
.graph {
	width: 600px;
	height: 300px;
	float: left;
	margin: 10px;
	position: relative;
	border: 1px solid #999;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
}

.comment {
	position: relative;
	float: left;
	width: 240px;
	margin: 10px;
	padding: 5px;
	background-color: orange;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
}
</style>
<%

if(request.getParameterMap().containsKey("selected_id")){	
testBean.setTest(new Test());
testBean.setId(Integer.parseInt(request.getParameter("selected_id")));
testBean.load();
}
	Connection conn = null;

	String userName = "team02";
	String password = "team02";
	String url = "jdbc:mysql://127.0.0.1:3306/jp_autotest";
	Class.forName("com.mysql.jdbc.Driver").newInstance();

	int count = 0;
	int count_95 = 0, count_90 = 0, count_85 = 0;
	int count_80 = 0, count_75 = 0, count_70 = 0;
	int count_65 = 0, count_60 = 0, count_55 = 0;
	int count_50 = 0, count_45 = 0, count_40 = 0;
	int count_30 = 0, count_20 = 0, count_10 = 0, count_0 = 0;
	int statistics_a = 0, statistics_b = 0, statistics_c = 0, statistics_d = 0, statistics_f = 0;
	int sum = 0;
	
	float average = 0;
	
	ArrayList arrscore = new ArrayList();
	ArrayList arrname = new ArrayList();
	
	String title = null, subtitle = null;
	try {
		conn = DriverManager.getConnection(url, userName, password);
		System.out.println("Connected Database");
		String test_id = (request.getParameter("selected_id"));
		String query = "SELECT score2, name from jp_examinee where test_id = '"
				+ test_id + "' ORDER BY score DESC";
		String query2 = "SELECT title, subtitle from jp_test where id = '"
				+ test_id + "'";
		System.out.println(query);

		System.out.println(query2);
		int max_score = testBean.getMaxScore();
		
		System.out.print(max_score);
		
		Statement st = conn.createStatement();
		ResultSet rs = st.executeQuery(query);

		Statement st2 = conn.createStatement();
		ResultSet rs2 = st2.executeQuery(query2);
		while (rs2.next()) {
			title = rs2.getString(1);
			subtitle = rs2.getString(2);

		}
		
		
		while (rs.next()) {
			
			float score_tmp = (float)(rs.getInt(1))/max_score*100;	
			score_tmp = Math.round(score_tmp * 100) / 100f;
			//System.out.println(score_tmp);
			
			arrscore.add(score_tmp);
			arrname.add(rs.getString(2));
			count++;
			sum = sum+ rs.getInt(1);
			if (score_tmp <= 100  && score_tmp >=95)
				count_95++;
			if (score_tmp < 95 && score_tmp>=90)
				count_90++;
			if (score_tmp < 90 && score_tmp>=85)
				count_85++;
			if (score_tmp < 85 && score_tmp>=80)
				count_80++;
			if (score_tmp < 80 && score_tmp>=75)
				count_75++;
			if (score_tmp < 75 && score_tmp>=70)
				count_70++;
			if (score_tmp < 70 && score_tmp>=65)
				count_65++;
			if (score_tmp < 65 && score_tmp>=60)
				count_60++;
			if (score_tmp < 60 && score_tmp>=55)
				count_55++;
			if (score_tmp < 55 && score_tmp>=50)
				count_50++;
			if (score_tmp < 50 && score_tmp>=45)
				count_45++;
			if (score_tmp < 45 && score_tmp>=40)
				count_40++;
			if (score_tmp < 40 && score_tmp>=30)
				count_30++;
			if (score_tmp < 30 && score_tmp>=20)
				count_20++;
			if (score_tmp < 20 && score_tmp>=10)
				count_10++;
			if (score_tmp < 10 && score_tmp>=0)
				count_0++;

		}
		conn.close();
		statistics_a = count_95 + count_90 + count_85;
		statistics_b = count_80 + count_75 + count_70;
		statistics_c = count_65 + count_60 + count_55;
		statistics_d = count_50 + count_45 + count_40;
		statistics_f = count - statistics_a - statistics_b
				- statistics_c - statistics_d;
	} catch (Exception e) {

	}
	
	
		
	average = (float) sum/count;
	average = Math.round(average*100)/100f;	

	float p95 = (float)count_95 / count * 100;
	p95 = Math.round(p95 * 100) / 100f;


	float p90 = (float)count_90 / count * 100;
	p90 = Math.round(p90 * 100) / 100f;
	
	float p85 = (float)count_85 / count * 100;
	p85 = Math.round(p85 * 100) / 100f;

	float p80 = (float)count_80 / count * 100;
	p80 = Math.round(p80 * 100) / 100f;

	float p75 = (float)count_75 / count * 100;
	p75 = Math.round(p75 * 100) / 100f;

	float p70 = (float)count_70 / count * 100;
	p70 = Math.round(p70 * 100) / 100f;

	float p65 =(float) count_65 / count * 100;
	p65 = Math.round(p65 * 100) / 100f;

	float p60 = (float)count_60 / count * 100;
	p60 = Math.round(p60 * 100) / 100f;

	float p55 = (float)count_55 / count * 100;
	p55 = Math.round(p55 * 100) / 100f;

	float p50 = (float)count_50 / count * 100;
	p50 = Math.round(p50 * 100) / 100f;

	float p45 = (float)count_45 / count * 100;
	p45 = Math.round(p45 * 100) / 100f;

	float p40 = (float)count_40 / count * 100;
	p40 = Math.round(p40 * 100) / 100f;

	float p30 = (float)count_30 / count * 100;
	p30 = Math.round(p30 * 100) / 100f;

	float p20 = (float) count_20 / count * 100;
	p20 = Math.round(p20 * 100) / 100f;

	float p10 =(float) count_10 / count * 100;
	p10 = Math.round(p10 * 100) / 100f;

	float p0 = (float)count_0 / count * 100;
	p0 = Math.round(p0 * 100) / 100f;	
	
	
%>



<script type="text/javascript">
	$(function() {
		
		var title = "<%=title%>";
		var subtitle = "<%=subtitle%>";
			var colors = Highcharts.getOptions().colors, categories = [ 'A',
					'B', 'C', 'D', 'F' ], name = 'ポイントパーセント', data = [ {
				y : <%=p85%>+ <%=p90%>+ <%=p95%>,
				color : colors[0],
				drilldown : {
					name : '統計A',
					categories : [ '8.5-9.0', '9.0-9.5', '9.5-10.0' ],
					data : [ <%=p85%>, <%=p90%>, <%=p95%>],
					color : colors[0]
				}
			}, {
				y : <%=p70%>+ <%=p75%>+ <%=p80%>,
				color : colors[1],
				drilldown : {
					name : '統計B',
					categories : [ '7.0-7.5', '7.5-8.0', '8.0-8.5' ],
					data : [ <%=p70%>, <%=p75%>, <%=p80%> ],
					color : colors[1]
				}
			}, {
				y : <%=p55%>+ <%=p60%>+ <%=p65%>,
				color : colors[2],
				drilldown : {
					name : '統計C',
					categories : [ '5.5-6.0', '6.0-6.5', '6.5-7.0' ],
					data : [ <%=p55%>, <%=p60%>, <%=p65%> ],
					color : colors[2]
				}
			}, {
				y : <%=p40%>+ <%=p45%>+ <%=p50%>,
				color : colors[3],
				drilldown : {
					name : '統計D',
					categories : [ '4.0-4.5', '4.5-5.0', '5.0-5.5' ],
					data : [ <%=p40%>, <%=p45%>, <%=p50%> ],
					color : colors[3]
				}
			}, {
				y : <%=p0%>+<%=p10%>+ <%=p20%>+ <%=p30%>,
				color : colors[4],
				drilldown : {

		
				name 
		: '統計F',
					categories : [ '0-1', '1-2', '2-3', '3-4' ],
					data : [ <%=p0%>, <%=p10%>, <%=p20%>, <%=p30%>],
				color : colors[4]
			}
		} ];

		function setChart(name, categories, data, color) {
			chart.xAxis[0].setCategories(categories, false);
			chart.series[0].remove(false);
			chart.addSeries({
				name : name,
				data : data,
				color : color || 'white'
			}, false);
			chart.redraw();
		}

		var chart = $('#container').highcharts(
				{
					chart : {
						type : 'column',
						renderTo : 'container',
					},
					title : {
						text : title
					},
					subtitle : {
						text : subtitle
					},
					xAxis : {
						categories : categories
					},
					yAxis : {
						title : {
							text : 'マークの割合'
						}
					},
					plotOptions : {
						column : {
							cursor : 'pointer',
							point : {
								events : {
									click : function() {
										var drilldown = this.drilldown;
										if (drilldown) { // drill down
											setChart(drilldown.name,
													drilldown.categories,
													drilldown.data,
													drilldown.color);
										} else { // restore
											setChart(name, categories, data);
										}
									}
								}
							},
							dataLabels : {
								enabled : true,
								color : colors[0],
								style : {
									fontWeight : 'bold'
								},
								formatter : function() {
									return this.y + '%';
								}
							}
						}
					},
					tooltip : {
						formatter : function() {
							var point = this.point, s = this.x + ':<b>'
									+ this.y + '% </b><br/>';
							if (point.drilldown) {
								s += 'クリックして表示 ' + point.category + ' バージョン';
							} else {
								s += 'ポイントパーセントに戻る。';
							}
							return s;
						}
					},
					series : [ {
						name : name,
						data : data,
						color : 'white'
					} ],
					exporting : {
						enabled : false
					}
				}).highcharts(); // return chart
	});
</script>

<br>
<div class="menu1"><%@include file="/jsputils/menu.jsp"%>
	<div class="greeting_message">
		<%@include file="/jsputils/greeting.jsp"%>
	</div>
</div>

<div class="container" style="height: 320px;">
	<div class="comment">
	<b>回答者の点の統計表</b>
	<%  %>		
		 <br /> A ランク:
		<%=statistics_a%><br /> B ランク:
		<%=statistics_b%><br /> C ランク:
		<%=statistics_c%><br /> D ランク:
		<%=statistics_d%><br /> F ランク:
		<%=statistics_f%><br /><b>アベレージ:<%=average%></b>
		<h1>ランキング </h1>
	<table border="1" align="center">
		<tr><th>名前</th><th>点数</th></tr>
			<% for (int j= 0; j< count; j++ ) { %>
			<tr><td><%=arrname.get(j) %></td>
			<td><%=arrscore.get(j) %></td>
		</tr>
		<%} %>	
	</table> 
	<% %>
	</div>
	<div id="container" class="graph"></div>
</div>
